<template>
  <div>
    <h1>{{count}}</h1>
    <button @click='count++'>累加</button>
    <button @click="destroy">卸载组件</button>

    <Header :count='count'/>

  </div>
</template>

<script>
import Header from './components/Header'
export default {
  name: "App",
  data(){
    return {
      count :0
    }
  },
  components:{
    Header
  },
  beforeCreate() {
    console.log("----beforeCreate----");
  },
  created() {
    console.log("----created----");
  },
  beforeMount() {
    console.log("----beforeMount----");
  },
  mounted() {
    console.log("----mounted----");
  },
  beforeUpdate() {
    console.log("----beforeUpdate----");
  },

  updated() {
    console.log("----updated----");
  },

  beforeDestroy() {
    console.log("----beforeDestroy----");
  },
  destroyed() {
    console.log("----destroyed----");
  },

  methods: {
    destroy() {
      this.$destroy();
    },
  },
  
};
</script>

<style>
</style>